<template>
	<view class="detail-page">
		<view class="top">
			<view class="navigation">
				<view class="back" @click="back"></view>
				<view class="tool">
					<view class="collection" @click="collection"></view>
					<!-- <view class="share"></view> -->
				</view>
			</view>
			<view class="image" :style="{ backgroundImage: 'url(' + detailMsg.image + ')' }">
			</view>
		</view>
		<view class="boxc">
			<view class="msg-one">
				<view class="name" style="font-weight: bold;font-size: 5vw;">{{detailMsg.name}}</view>
				<view class="seed" style="color: #8C92A4;font-size: 4vw;">图案模板（paint&nbsp;seed）:&nbsp;594
				</view>
				<view class="index" style="color: #8C92A4;font-size: 4vw;">皮肤编号（paint&nbsp;index）:&nbsp;911</view>
				<view class="wear" style="color: #8C92A4;margin-bottom: 2vw;font-size: 4vw;">磨损：
					<span v-if="detailMsg.wear_status==1">无磨损</span>
					<span v-if="detailMsg.wear_status==2">战痕累累</span>
					<span v-if="detailMsg.wear_status==3">破损不堪</span>
					<span v-if="detailMsg.wear_status==4">久经沙场</span>
					<span v-if="detailMsg.wear_status==5">略有磨损</span>
					<span v-if="detailMsg.wear_status==6">崭新出厂</span>
					<span v-if="detailMsg.wear_status==7">其他</span>
				</view>
			</view>
			<view class="else"></view>
			<view class="msg-two">
				<view>属性详情</view>
				<view style="font-size: 4vw;">类型:&nbsp;{{detailText.名称}}</view>
				<view style="font-size: 4vw;">类别:&nbsp;{{detailText.类别}}</view>
				<view style="font-size: 4vw;">品质:&nbsp;{{detailText.品质}}</view>
				<view style="font-size: 4vw;">外观:&nbsp;{{detailText.外观}}</view>
				<view style="font-size: 4vw;">该物品具有StarTrak™技术，在其所有者装备是能跟踪若干统计数据。</view>
				<view style="font-size: 4vw;">该物品记录已认证杀敌数。</view>
			</view>
		</view>
		<view class="buy">
			<view class="price">
				售价<span style="font-size: 5vw;margin-left: 3vw;">￥{{detailMsg.price}}</span>
			</view>
			<view class="buyBtn" @click="buy">购买</view>
		</view>
	</view>
</template>

<script>
	import wearProgressVue from '../../components/wear-progress.vue'
	export default {
		data() {
			return {
				detailMsg: {},
				detailText: {},
				providerMsg: {},
				//背景色
				bgColor: "#fff",
				//文本色
				textColor: "#2A2D2E"
			}
		},
		components: {
			wearProgressVue
		},
		onLoad(options) {
			console.log(options);
			this.getDetail(options.data)
		},
		onShow() {
			this.getSetting()
		},
		methods: {
			//收藏
			collection() {
				let data = {
					jewelry_id: this.detailMsg.id
				}
				uni.request({
					url: "/api/jewerly/collect",
					method: "POST",
					header: {
						token: uni.getStorageSync("token")
					},
					data: data
				}).then(res => {
					uni.showToast({
						title: res.data.msg,
						icon: "none",
						duration: 1000
					})
				})
			},
			getSetting() {
				uni.request({
					url: "/api/index/getSetting",
					method: "POST"
				}).then(res => {
					document.documentElement.style.setProperty('--bg-color', res.data.data.theme_color);
					document.documentElement.style.setProperty('--text-color', res.data.data.font_color);
				})
			},
			//详情页数据
			getDetail(id) {
				let data = {
					id: id
				}
				let token = uni.getStorageSync('token')
				uni.request({
					url: "/api/jewerly/jewerly_info",
					method: "GET",
					data: data,
					header: {
						token: token
					}
				}).then(res => {
					if (res.data.code == 409 || res.data.code == 403 || res.data.code == 303) {
						uni.removeStorageSync("user")
						uni.removeStorageSync("token")
						uni.removeStorageSync("datausers")
						uni.showToast({
							icon: "none",
							title: "请重新登录",
							duration: 1000
						})
						setTimeout(() => {
							uni.navigateTo({
								url: "/pages/login/login"
							})
						}, 1000)
						return
					}
					// console.log(res);
					this.detailMsg = res.data.data
					let detail = this.detailMsg.detail
					// 按行拆分字符串
					const lines = detail.split('\n');

					// 遍历每一行并将其转换成键值对
					lines.forEach(line => {
						// 按 "：" 拆分键和值
						const [key, value] = line.split('：');
						// 去除键和值中的多余空格并存储到对象中
						this.detailText[key.trim()] = value.trim();
					});
				})
			},
			back() {
				let canNavBack = getCurrentPages()
				if (canNavBack && canNavBack.length > 1) {
					uni.navigateBack()
				} else {
					history.back();
				}
			},
			buy() {
				let detailMsg = JSON.stringify(this.detailMsg)
				uni.navigateTo({
					url: `/pages/pay/pay?detailMsg=${detailMsg}`
				})
			}
		}
	}
</script>
<style type="text/css">
	@import url("@/static/icon/style.css");
</style>
<style lang="scss" scoped>
	:root {
		--bg-color: ;
		--text-color: ;
	}

	.detail-page {
		width: 100vw;
		height: 92vh;

		.top {
			width: 100%;
			height: 35vh;
			background: linear-gradient(to bottom, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.9));
			overflow: hidden;

			.navigation {
				width: 90%;
				margin: auto;
				height: 10vw;
				margin-top: 9vw;
				display: flex;
				justify-content: space-between;
				align-items: center;

				.back {
					width: 7vw;
					height: 7vw;
					font-family: "icomoon";
					font-size: 6vw;
					color: white;
				}

				.back::before {
					content: "\e91d";
				}

				.tool {
					width: 10vw;
					display: flex;
					justify-content: space-between;

					.collection {
						width: 7vw;
						height: 7vw;
						font-family: "icomoon";
						font-size: 6vw;
						color: white;
						font-weight: bold;
					}

					.collection::before {
						content: "\e912";
					}

					.collection:active {
						animation: shake 800ms ease-in-out;
					}

					@keyframes shake {

						/* 水平抖动，核心代码 */
						10%,
						90% {
							transform: translate3d(-1px, 0, 0);
						}

						20%,
						80% {
							transform: translate3d(+2px, 0, 0);
						}

						30%,
						70% {
							transform: translate3d(-4px, 0, 0);
						}

						40%,
						60% {
							transform: translate3d(+4px, 0, 0);
						}

						50% {
							transform: translate3d(-4px, 0, 0);
						}
					}

					.share {
						width: 7vw;
						height: 7vw;
						font-family: "icomoon";
						font-size: 6vw;
						color: white;
					}

					.share::before {
						content: "\e901";
					}
				}
			}

			.image {
				width: 100%;
				height: 30vh;
				background-size: contain;
				background-position: center;
				background-repeat: no-repeat;
				margin-top: -7vw;
			}
		}

		.boxc {
			background-color: var(--bg-color);

			.msg-one {
				width: 90%;
				height: 40vw;
				margin: auto;
				display: flex;
				flex-direction: column;
				justify-content: space-around;
				background-color: var(--bg-color);
				color: var(--text-color);
			}

			.else {
				width: 100%;
				height: 3vh;
				background-color: var(--bg-color);
			}

			.msg-two {
				width: 90%;
				margin: auto;
				height: 40vh;
				overflow-y: scroll;
				background-color: var(--bg-color);

				view:nth-child(1) {
					font-size: 5vw;
					font-weight: bold;
					margin-top: 2vw;
					color: var(--text-color);
				}

				view:nth-child(2) {
					color: #a7a7a7;
					margin-top: 2vw;
				}

				view:nth-child(3) {
					color: #a7a7a7;
					margin-top: 2vw;
				}

				view:nth-child(4) {
					color: #a7a7a7;
					margin-top: 2vw;
				}

				view:nth-child(5) {
					color: #a7a7a7;
					margin-top: 2vw;
				}

				view:nth-child(6) {
					color: #90c8ff;
					margin-top: 5vw;
				}

				view:nth-child(7) {
					color: #cd642a;
					margin-top: 5vw;
				}
			}
		}


		.buy {
			width: 100vw;
			height: 8vh;
			position: fixed;
			bottom: 0;
			left: 0;
			border-top: 2px solid #f4f5f7;
			display: flex;
			justify-content: space-between;
			align-items: center;
			background-color: var(--bg-color);

			.price {
				color: #b3b3b3;
				margin-left: 5vw;

				>span {
					font-weight: bold;
					color: #f69409;
				}
			}

			.buyBtn {
				width: 20vw;
				height: 10vw;
				background-color: #f69409;
				border-radius: 5px;
				text-align: center;
				line-height: 10vw;
				font-weight: bold;
				color: white;
				font-size: 4vw;
				margin-right: 5vw;
			}
		}
	}
</style>